<template>
    <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4">
      <div
          @drop.prevent="handleDrop"
          @dragover.prevent
          class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-indigo-500 transition-colors"
      >
        <upload class="w-12 h-12 mx-auto text-gray-400 mb-4" />
        <p class="text-gray-600 mb-2">Drag and drop an image here, or</p>
        <el-button
            @click="triggerFileInput"
            class="text-indigo-600 hover:text-indigo-700 font-medium"
        >
          browse your computer
        </el-button>
        <input
            ref="fileInput"
            type="file"
            accept="image/*"
            @change="handleFileSelect"
            class="hidden"
        />
      </div>

      <p class="mt-2 text-sm text-gray-500">
        Supported formats: PNG, JPG, GIF
      </p>
    </div>
</template>

<script>
import { Upload } from 'lucide-vue';

export default {
  components: {
    Upload,
  },
  methods: {
    handleDrop(e) {
      e.preventDefault();
      const file = e.dataTransfer.files[0];
      if (file && file.type.startsWith('image/')) {
        this.$emit('image-select', file);
        this.$emit('close');
      }
    },
    handleFileSelect(e) {
      const file = e.target.files?.[0];
      console.log('55', file)
      if (file) {
        this.$emit('image-select', file);
        this.$emit('close');
      }
    },
    triggerFileInput() {
      this.$refs.fileInput.click();
    },
  },
};
</script>